<template>
  <Card title="行首图标" :bordered="false" :head-style="headStyle" :loading="loading">
    <template #extra>
      <a-button class="ml-2" type="primary" @click="handleOk" :loading="loading"> 保存 </a-button>
    </template>
    <div class="w-full flex items-center gap-10px justify-center">
      <a-button
        style="margin: 10px 0"
        :type="dataRef.promptCond && dataRef.promptCond.length ? 'primary' : 'default'"
        @click="handleConfiguration"
      >
        配置
      </a-button>
      行首显示图标
      <TreeSelect
        style="width: 300px"
        :tree-data="imgeLists"
        :show-search="true"
        treeNodeFilterProp="label"
        v-model:value="dataRef['promptIcon']"
      >
        <template #title="item">
          <div class="flex"
            ><Image :src="item.img" style="" /><div class="ml-3">{{ item.label }}</div></div
          >
        </template>
      </TreeSelect>
      <!-- <Select
        style="width: 200px"
        v-model:value="dataRef.promptIcon"
        :options="imgeLists"
        optionFilterProp="label"
        showSearch
      /> -->
    </div>
    <ConfigurationModal
      @register="registerConfigurationModal"
      @success="handleSuccessConfigurationModal"
    />
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed, nextTick } from 'vue';
  import { Card, TreeSelect, Image } from 'ant-design-vue';
  import ConfigurationModal from '../../configuration/index';
  import { useModal } from '/@/components/Modal';
  import { getVisualSetPromptIcon, getVisualGetPromptIcon } from '/@/api/module/module';
  import { getLsdList } from '/@/api/process/process';
  import { isArray } from '/@/utils/is';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  const props = defineProps({
    moduleCode: {
      type: String,
      default: '',
    },
    formCode: {
      type: String,
      default: '',
    },
    headStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formGetFieldsData: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  });
  const { createMessage } = useMessage();
  const userStore = useUserStore();
  const serverInfo = userStore.getServerInfo;

  const dataRef = ref<Recordable>({ promptCond: '', promptIcon: '' });
  const loading = ref(false);
  const imgeLists = ref<Recordable[]>([]);

  //获取初始化数据
  const getVisualGetPromptIconData = async () => {
    const res = await getVisualGetPromptIcon({ moduleCode: props.moduleCode });
    dataRef.value = res;

    let options = res.icons;
    imgeLists.value = [];
    if (!isArray(options)) {
      imgeLists.value = [];
    } else {
      if (options && options.length > 0) {
        options.forEach((item) => {
          const obj = {};
          obj['value'] = item;
          obj['img'] = item
            ? serverInfo.rootPath + (item && item.startsWith('/') ? item : `/${item}`)
            : '';
          let label = item.substring(item.lastIndexOf('/') + 1);
          obj['label'] = label;
          obj['children'] = [];
          imgeLists.value.push(obj);
        });
        console.log('imgeLists', imgeLists.value);
      }
    }
  };
  const fetch = () => {
    nextTick().then(() => {
      getVisualGetPromptIconData();
    });
  };
  onMounted(fetch);

  const [registerConfigurationModal, { openModal: openConfiguration }] = useModal();
  //组合条件配置
  const handleConfiguration = () => {
    openConfiguration(true, {
      list: dataRef.value.promptCond || [],
      formGetFieldsData: props.formGetFieldsData,
    });
  };

  const handleSuccessConfigurationModal = ({ value }) => {
    dataRef.value.promptCond = value;
  };

  //保存
  const handleOk = async () => {
    try {
      loading.value = true;
      const formData = Object.assign({}, dataRef.value);
      formData.code = props.moduleCode;
      formData.formCode = props.formCode;
      await getVisualSetPromptIcon(formData);
      createMessage.success('操作成功');
      getVisualGetPromptIconData();
    } catch (error) {
      console.error(error);
    } finally {
      loading.value = false;
    }
  };
</script>
